<script lang="ts" setup>
import { ref , onMounted } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import service from "@/api";


// var tableData = ref([]);

var check = (select: any, row: any) => {
  console.log(select, row);
};
var checkAll = (a: any) => {
  console.log(a);
};

var tableData:any = ref([]);

for (var i = 0; i < 20; i++) {
  tableData.value.push({
    flex: true,
    name: "围墙门禁" + i,
    address: "ISIS-MJ-400",
    xinghao: "Iss20200816",
    weizhi: "A1栋右边地面围墙",
    status: "1",
    data: "300",
    time: "2022-01-23",
  });
}
var del = () => {
  console.log(1);
};
var add = () => {
  console.log(2);
};



// 租户账单管理
onMounted(async () => {

  // 信息新增   ?
  // var res = await service.tenantBillingTable.tenantBillingTable_add({})
  // console.log(res);

  // 通过id删除商品
  // var res = await service.tenantBillingTable.tenantBillingTable_deleteById({})
  // console.log(res);

  // 批量删除   ?
  // var res = await service.tenantBillingTable.tenantBillingTable_deletefew({})
  // console.log(res);

  // 租户信息编辑   ？
  // var res = await service.tenantBillingTable.tenantBillingTable_edit({})
  // console.log(res);

  // 通过id获取信息   ?
  // var res = await service.tenantBillingTable.tenantBillingTable_queryById({})
  // console.log(res);

  // 获取所有租户信息
  // var res = await service.tenantBillingTable.tenantBillingTable_queryByPage({})
  // console.log(res);

})
</script>
<template>
  <!-- 租户账单管理 -->

  <div class="tenement_sixth">
    <!-- 头部包含了新增  批量删除 -->
    <Header title="租户账单管理" @del="del" @add="add" />

    <!-- 内容部分 -->
    <div class="main">

      <!-- 表单部分 -->
      <div class="nav">
        <div class="kuang">
          <el-form class="form">
            <!-- 表单  输入框 下拉菜单部分 -->
            <div class="left">
              <div class="item">
                <span>租户名称：</span>
                <el-input placeholder="请输入租户名称" />
              </div>
              <div class="select">
                <span>所属楼宇：</span>
                <el-select placeholder="请选择">
                  <el-option label="A1幢" value="" />
                  <el-option label="B2幢" value="" />
                  <el-option label="C3幢" value="" />
                </el-select>
              </div>
              <div class="item">
                <span>房间名称：</span>
                <el-input placeholder="请输入房间名称" />
              </div>
              <div class="select">
                <span>账单类型：</span>
                <el-select placeholder="请选择">
                  <el-option label="水费" value="" />
                  <el-option label="电费" value="" />
                  <el-option label="物业费" value="" />
                </el-select>
              </div>
              <div class="item">
                <span>出账时间：</span>
                <el-input placeholder="请输入出账时间" />
              </div>
              <div class="item">
                <span>缴费时间：</span>
                <el-input placeholder="请输入缴费时间" />
              </div>
            </div>
            <!-- 表单   查询 重置 按钮-->
            <div class="btns">
              <el-button type="success" class="chaxun">查询</el-button>
              <el-button type="info" plain>重置</el-button>
            </div>
          </el-form>
        </div>
      </div>

      <!-- 表格部分 -->
      <div class="tableBox">
        <Table :data="tableData" @check="check" @check-all="checkAll"
          :keys="['flex', 'name', 'address', 'xinghao', 'weizhi', 'status', 'data', 'time',]"
          :label="['值', '租户名称', '所属楼宇', '房间名称', '合同类型', '合同状态', '签约时间', '到期时间',]">
          <template #btn>
            <span>详情</span>&emsp;&emsp;
            <span>删除</span>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@import '@/saas/Table.scss';
</style>
